<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    
    
   
    <h:head>
        <title><h:outputText value="#{msg['sistema.nombre']}" /></title>
        <link type="text/css" href="recursos/estilos/acd.main.css" rel="stylesheet" />
        
        <script type="text/javascript" src="recursos/scripts/acd.main.js" ></script>           
        <style>
            .tdClass1{width:150px; padding:5px; vertical-align: middle; }
            .tdClass2{width:180px; padding:5px; vertical-align: middle; }                      
            .tdClass3{ padding:5px; vertical-align: middle;}
            
            .tdClassA{}
            .tdClassB{width:100%}
        </style>
    </h:head>
    
    <h:body>
        <ui:include src="../header.xhtml" />
        

        
        <div class="body">
        <center>            
            <div class="inBody" style="font-size: 12px;">
                
                
             
                
<h:form id="form">  
          
    <p:panel header="#{msg['usuario.nuevoUsuario']}" id="panel" style="text-align:left;">  
        
        <p:messages id="messages" /> 
        
        
        <h:panelGrid columns="2" style="width:100%;" columnClasses="tdClassA, tdClassB" >
            <img src="recursos/imagenes/usuario.jpg" style="width:250px;" />
            
        <h:panelGrid columns="4"  id="matchGrid" style="width:100%; border:solid 1px silver; border-radius: 10px;" columnClasses="tdClass1,tdClass2,tdClass3">         
            
            
            <h:outputLabel for="nombre" id="nombreLbl" value="#{msg['usuario.nombre']} *" />              
            <p:inputText id="nombre" value="#{usuariosBean.nombre}" 
                         required="false" validatorMessage="nada" />
            <h:outputText value="#{usuariosBean.msgNombre}" style="color:red;" />
            <p:tooltip for="nombreLbl" value="Ejemplo: Juan Perez" showEffect="clip" hideEffect="clip" />
            
            
            
            <h:outputLabel for="username" id="usernameLbl" value="Correo electrónico: *" />  
            <p:inputText id="username" value="#{usuariosBean.username}" 
                         required="false" />
            <h:outputText value="#{usuariosBean.msgUsername}" style="color:red;" />                        
            <p:tooltip for="usernameLbl" value="Ejemplo: jperez@kmail.com" showEffect="clip" hideEffect="clip" />
            
            
            
            
            <h:outputLabel for="tipo" id="tipoLbl" value="Tipo de usuario" />
            <p:selectOneMenu id="tipo" value="#{usuariosBean.tipo}" >  
                <f:selectItems value="#{usuariosBean.tipos}" />                             
            </p:selectOneMenu>             
            <p:tooltip for="tipoLbl" value="Modalidad de participación en concursos" showEffect="clip" hideEffect="clip" />
            <h:outputText />
            
            
            <h:outputLabel for="pass1" id="pass1Lbl"  value="#{msg['usuario.pass']} *" />  
            <p:password id="pass1" value="#{usuariosBean.pass1}"                         
                        promptLabel="#{msg['usuario.ingresePass']}" 
                        weakLabel="#{msg['usuario.passInseguro']}"  
                        goodLabel="#{msg['usuario.passAceptable']}" 
                        strongLabel="#{msg['usuario.passRobusto']}"
                        feedback="true" 
                        inline="true"
                        />                                    
            <h:outputText value="#{usuariosBean.msgPass1}" style="color:red;" />
            <p:tooltip for="pass1Lbl" value="Puede incluir letras, numeros y caracteres" showEffect="clip" hideEffect="clip" />
            
            
            
            
            <h:outputLabel for="pass2" id="pass2Lbl" value="#{msg['usuario.confirmPass']} *" />  
            <p:password id="pass2" value="#{usuariosBean.pass2}" />                                    
            <h:outputText value="#{usuariosBean.msgPass2}" style="color:red;" />
            <p:tooltip for="pass2Lbl" value="Confirme su contraseña" showEffect="clip" hideEffect="clip" />
            
            
            
            
        </h:panelGrid>      
            <h:outputText />
            
            
            
            <p:commandButton value="Crear nueva cuenta de usuario" update="panel" 
                             id="ajax"  icon="ui-icon-disk"
             actionListener="#{usuariosBean.guardarUsuario}" action="#{usuariosBean.guardarUsuario}" />  
            
            
        </h:panelGrid>
    </p:panel>    
</h:form>  
                <br/>
                <div style="text-align:right;">
                    <form action="#{modulo.login}" method="GET">
                        <input type="hidden" name="modulo" value="usuarios" />
                        <input type="hidden" name="action" value="nuevo" />
                    <p:commandButton value="Regresar a la página principal" 
                             icon="ui-icon-arrowreturnthick-1-w" action="jv" /> 
                    </form>
                </div>
                      
                
                
                <h:form>
            Opciones: <h:selectOneMenu value="#{usuariosBean.tipo}">
                <f:selectItems value="#{usuariosBean.tipos}" />
                <f:ajax render="opcionActual" />
            </h:selectOneMenu><br/>
            <h:commandButton value="Mostrar" />
            <br/>
            Opción seleccionada: <h:outputText id="opcionActual" value="#{usuariosBean.tipo}" />
        </h:form>
                
            </div>
        </center>
        </div>    
        
    
        <ui:include src="../footer.xhtml" />    
    </h:body>
</ui:composition>
